<template>
	<ul class="res-nav clearfix">
		
		<li v-for="(item, index) in types" :key="item.id">
			<a href="javascript:void(0)" @click="oneTypeIndex = index">{{item.name}}<i :class="{active: oneTypeIndex === index}"></i></a>
			<Transition name="fade">
				<ul v-show="oneTypeIndex === index">
					<li v-for="rtype in item.children" :key="rtype.id">
						<a href="javascript:void(0)" @click="handlerType(rtype, item)" :class="{active: modelValue === rtype.id}">{{rtype.name}}</a>
					</li>
				</ul>
			</Transition>
		</li>
		
	</ul>
</template>

<script>
export default {
	props: {
		types: {
			type: Array, 
			required: true 
		}, 
		modelValue: {
			type: [Number, String],
			required: true , 
		}
	}, 
	data() {
		return {
			oneTypeIndex : -1 , // 定义默认展开的一级分类
		}
	},
	emits: ["update:model-value", "type-click"] ,
	methods: {
		handlerType(rtype, parent) {
			this.$emit("update:model-value", rtype.id) ; // 更新父组件中的ID  
			// 获取 一级类型 和 二级 类型 
			this.$emit("type-click", parent,  rtype) ;   // 绑定 type-click 事件
		}
	}
}
</script>

<style scoped>

.fade-enter-active  {
	transition: all .5s ease;
}

.fade-enter-from  {
	width: 0 !important;
	height: 0 !important;
	opacity: 0;
	
}
</style>